<template>
  <div>
    <div class="table_card">
      <div class="table_card_top">
        <span class="pl_left"></span>
        <div class="rules_title">实习店长</div>
      </div>

      <div class="Parameter_form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="底薪" prop="internshipSalaryMoney">
                <div class="iptBox">
                  <div class="ipt_numberBox">
                    <el-input-number
                      v-model="ruleForm.internshipSalaryMoney"
                      placeholder="请输入"
                      class="w-300 text-left"
                      :precision="2"
                      :min="0"
                      :controls="false"
                    ></el-input-number>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="线上转化率" prop="internshipOnLine">
                <div class="Rules_form_box">
                  <div class="Rules_form_ipt">
                    <el-input-number
                      placeholder="请输入"
                      v-model="ruleForm.internshipOnLine"
                      class="up_ipt text-left"
                      :precision="2"
                      :min="0"
                      :max="1000000"
                      :controls="false"
                    ></el-input-number>
                  </div>
                  <div class="Rules_form_select">%</div>
                </div>
              </el-form-item>
              <div class="Rules_form_money">
                <el-form-item
                  label="线上转化率(金额)"
                  prop="internshipOnLineMoney"
                >
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.internshipOnLineMoney"
                    class="up_ipt text-left"
                    :precision="2"
                    :min="0"
                    :max="100000000000000"
                    :controls="false"
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <el-form-item label="美团综合好评率" prop="internshipMtGood">
                <div class="Rules_form_box">
                  <div class="Rules_form_ipt">
                    <el-input-number
                      placeholder="请输入"
                      v-model="ruleForm.internshipMtGood"
                      class="up_ipt text-left"
                      :precision="2"
                      :min="0"
                      :max="1000000"
                      :controls="false"
                    ></el-input-number>
                  </div>
                  <div class="Rules_form_select">%</div>
                </div>
              </el-form-item>
              <div class="Rules_form_money">
                <el-form-item
                  label="美团综合好评率(金额)"
                  prop="internshipMtGoodMoney"
                >
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.internshipMtGoodMoney"
                    class="up_ipt text-left"
                    :precision="2"
                    :min="0"
                    :max="100000000000000"
                    :controls="false"
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <el-form-item label="综合差评率" prop="internshipBad">
                <div class="Rules_form_box">
                  <div class="Rules_form_ipt">
                    <el-input-number
                      placeholder="请输入"
                      v-model="ruleForm.internshipBad"
                      class="up_ipt text-left"
                      :precision="2"
                      :min="0"
                      :max="1000000"
                      :controls="false"
                    ></el-input-number>
                  </div>
                  <div class="Rules_form_select">%</div>
                </div>
              </el-form-item>
              <div class="Rules_form_money">
                <el-form-item
                  label="综合差评率(金额)"
                  prop="internshipBadMoney"
                >
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.internshipBadMoney"
                    class="up_ipt text-left"
                    :precision="2"
                    :min="0"
                    :max="100000000000000"
                    :controls="false"
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="table_card">
      <div class="table_card_top">
        <span class="pl_left"></span>
        <div class="rules_title">正式店长</div>
      </div>
      <div class="Parameter_form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="底薪" prop="formalSalaryMoney">
                <div class="iptBox">
                  <div class="ipt_numberBox">
                    <el-input-number
                      v-model="ruleForm.formalSalaryMoney"
                      placeholder="请输入"
                      class="w-300 text-left"
                      :precision="2"
                      :min="0"
                      :controls="false"
                    ></el-input-number>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="线上转化率" prop="formalOnLine">
                <div class="Rules_form_box">
                  <div class="Rules_form_ipt">
                    <el-input-number
                      placeholder="请输入"
                      v-model="ruleForm.formalOnLine"
                      class="up_ipt text-left"
                      :precision="2"
                      :min="0"
                      :max="1000000"
                      :controls="false"
                    ></el-input-number>
                  </div>
                  <div class="Rules_form_select">%</div>
                </div>
              </el-form-item>
              <div class="Rules_form_money">
                <el-form-item label="线上转化率(金额)" prop="formalOnLineMoney">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.formalOnLineMoney"
                    class="up_ipt text-left"
                    :precision="2"
                    :min="0"
                    :max="100000000000000"
                    :controls="false"
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <el-form-item label="美团综合好评率" prop="formalMtGood">
                <div class="Rules_form_box">
                  <div class="Rules_form_ipt">
                    <el-input-number
                      placeholder="请输入"
                      v-model="ruleForm.formalMtGood"
                      class="up_ipt text-left"
                      :precision="2"
                      :min="0"
                      :max="1000000"
                      :controls="false"
                    ></el-input-number>
                  </div>
                  <div class="Rules_form_select">%</div>
                </div>
              </el-form-item>
              <div class="Rules_form_money">
                <el-form-item
                  label="美团综合好评率(金额)"
                  prop="formalMtGoodMoney"
                >
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.formalMtGoodMoney"
                    class="up_ipt text-left"
                    :precision="2"
                    :min="0"
                    :max="100000000000000"
                    :controls="false"
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <el-form-item label="抖音好评率" prop="formalDyGood">
                <div class="Rules_form_box">
                  <div class="Rules_form_ipt">
                    <el-input-number
                      placeholder="请输入"
                      v-model="ruleForm.formalDyGood"
                      class="up_ipt text-left"
                      :precision="2"
                      :min="0"
                      :max="1000000"
                      :controls="false"
                    ></el-input-number>
                  </div>
                  <div class="Rules_form_select">%</div>
                </div>
              </el-form-item>
              <div class="Rules_form_money">
                <el-form-item label="抖音好评率(金额)" prop="formalDyGoodMoney">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.formalDyGoodMoney"
                    class="up_ipt text-left"
                    :precision="2"
                    :min="0"
                    :max="100000000000000"
                    :controls="false"
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <el-form-item label="综合差评率" prop="formalBad">
                <div class="Rules_form_box">
                  <div class="Rules_form_ipt">
                    <el-input-number
                      placeholder="请输入"
                      v-model="ruleForm.formalBad"
                      class="up_ipt text-left"
                      :precision="2"
                      :min="0"
                      :max="1000000"
                      :controls="false"
                    ></el-input-number>
                  </div>
                  <div class="Rules_form_select">%</div>
                </div>
              </el-form-item>
              <div class="Rules_form_money">
                <el-form-item label="综合差评率(金额)" prop="formalBadMoney">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.formalBadMoney"
                    class="up_ipt text-left"
                    :precision="2"
                    :min="0"
                    :max="100000000000000"
                    :controls="false"
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <el-form-item label="自招" prop="formalHire">
                <div class="Rules_form_box">
                  <div class="Rules_form_ipt">
                    <el-input-number
                      placeholder="请输入"
                      v-model="ruleForm.formalHire"
                      class="up_ipt text-left"
                      :min="0"
                      :precision="0"
                      :max="1000000"
                      :controls="false"
                    ></el-input-number>
                  </div>
                </div>
              </el-form-item>
              <div class="Rules_form_money">
                <el-form-item label="自招(金额)" prop="formalHireMoney">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.formalHireMoney"
                    class="up_ipt text-left"
                    :precision="2"
                    :min="0"
                    :max="100000000000000"
                    :controls="false"
                  ></el-input-number>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div class="el_btn_bottom">
          <el-button type="primary" @click="SaveProjectCom">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getManagerSalary, EditManagerSalary } from "@/api/bpm/Storesalary";
export default {
  name: "Storeadminmanagersalaryset",

  data() {
    return {
      ruleForm: {
        formalSalaryMoney: 0,
        formalOnLine: 0,
        formalOnLineMoney: 0,
        formalMtGood: 0,
        formalMtGoodMoney: 0,
        formalBad: 0,
        formalBadMoney: 0,
        formalDyGood: 0,
        formalDyGoodMoney: 0,
        formalHire: 0,
        formalHireMoney: 0,

        // 实习店长
        internshipSalaryMoney: 0,
        internshipOnLine: 0,
        internshipMtGood: 0,
        internshipBad: 0,
        internshipOnLineMoney: 0,
        internshipMtGoodMoney: 0,
        internshipBadMoney: 0,
      },
      rules: {
        salaryUp: [{ required: true, message: "请输入", trigger: "blur" }],
        salaryAward: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      ProjectCom: [],

      MoneyUpTypeOptions: [
        {
          value: "LE",
          label: "<",
        },
        {
          value: "EL",
          label: "≤",
        },
      ],
    };
  },

  created() {
    this.getHardNewQuery();
  },

  mounted() {},

  methods: {
    // 保存提成规则
    SaveProjectCom() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.CreateProjectCom();
        }
      });
    },

    resQ() {
      this.getHardNewQuery();
    },

    // 查询手工提成基础配置
    getHardNewQuery() {
      this.loading = true;
      getManagerSalary({})
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.ruleForm.formalSalaryMoney = data.formal.salaryMoney;
            this.ruleForm.formalOnLine = data.formal.onLine;
            this.ruleForm.formalOnLineMoney = data.formal.onLineMoney;
            this.ruleForm.formalMtGood = data.formal.mtGood;
            this.ruleForm.formalMtGoodMoney = data.formal.mtGoodMoney;
            this.ruleForm.formalBad = data.formal.bad;
            this.ruleForm.formalBadMoney = data.formal.badMoney;
            this.ruleForm.formalDyGood = data.formal.dyGood;
            this.ruleForm.formalDyGoodMoney = data.formal.dyGoodMoney;
            this.ruleForm.formalHire = data.formal.hire;
            this.ruleForm.formalHireMoney = data.formal.hireMoney;

            this.ruleForm.internshipSalaryMoney = data.internship.salaryMoney;
            this.ruleForm.internshipOnLine = data.internship.onLine;
            this.ruleForm.internshipOnLineMoney = data.internship.onLineMoney;
            this.ruleForm.internshipMtGood = data.internship.mtGood;
            this.ruleForm.internshipMtGoodMoney = data.internship.mtGoodMoney;
            this.ruleForm.internshipBad = data.internship.bad;
            this.ruleForm.internshipBadMoney = data.internship.badMoney;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    CreateProjectCom() {
      this.loading = true;

      let formal = {
        salaryMoney: this.ruleForm.formalSalaryMoney,
        onLineMoney: this.ruleForm.formalOnLineMoney,
        onLine: this.ruleForm.formalOnLine,
        mtGood: this.ruleForm.formalMtGood,
        mtGoodMoney: this.ruleForm.formalMtGoodMoney,
        dyGood: this.ruleForm.formalDyGood,
        dyGoodMoney: this.ruleForm.formalDyGoodMoney,
        bad: this.ruleForm.formalBad,
        badMoney: this.ruleForm.formalBadMoney,
        hire: this.ruleForm.formalHire,
        hireMoney: this.ruleForm.formalHireMoney,
      };

      let internship = {
        salaryMoney: this.ruleForm.internshipSalaryMoney,
        onLine: this.ruleForm.internshipOnLine,
        onLineMoney: this.ruleForm.internshipOnLineMoney,
        mtGood: this.ruleForm.internshipMtGood,
        mtGoodMoney: this.ruleForm.internshipMtGoodMoney,
        bad: this.ruleForm.internshipBad,
        badMoney: this.ruleForm.internshipBadMoney,
      };

      let ParamsObj = {
        formal,
        internship,
      };

      EditManagerSalary(ParamsObj)
        .then((res) => {
          //   console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.ProjectCom = data.list;
            this.getHardNewQuery();
            this.$message.success("操作成功");
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    SethandleClose() {
      this.resetFormData("ruleForm");
      this.$nextTick(() => {
        this.SetdialogVisible = false;
      });
    },

    // 表单重置
    resetFormData(formName) {
      // console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.pl_left {
  padding-left: 24px;
}
.rules_title {
  font-weight: bolder;
  font-size: 18px;
}
.Parameter_form {
  padding-left: 20px;
  position: relative;
  padding-bottom: 60px;
}
.ipt_iner {
  margin-top: 10px;
  .ipt_number {
    position: relative;
    .percent {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #333;
      font-size: 15px;
    }
  }
  .yuan {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #333;
    font-size: 15px;
  }
}
.el_btn_bottom {
  position: absolute;
  left: 800px;
  bottom: 20px;
}
.iptBox {
  .ipt_numberBox {
    position: relative;
    .percent {
      position: absolute;
      left: 280px;
      top: 1px;
    }
    .priceIcon {
      position: absolute;
      left: 310px;
      top: 1px;
    }
  }
}

.comeBox {
  position: relative;
  .comeOn {
    display: flex;
    .Come_ipt {
      width: 80px;
      margin: 0 10px;
      .el-input-number {
        width: 80px;
      }
    }
    .percent {
      position: absolute;
      left: 430px;
    }
  }
}

.Rules_form_box {
  display: flex;
  .Rules_form_ipt {
    margin-right: 10px;
  }
  .Rules_form_select {
    margin-right: 10px;
  }
}

.Rules_form_money {
  margin-top: 20px;
}
</style>
